<template>
  <div class="today-dishes">
    <h1><span id="current-date"></span>菜品</h1>
    <div v-if="loading" class="loading">
      Loading...
    </div>
    <div v-else class="dishes-grid">
      <div class="dish-card" v-for="(dish, index) in dishes" :key="dish.dish_id" @click="selectDish(dish)">
        <img :src="getImageUrl(dish.image_url)" alt="Image of the dish" class="dish-image" />
        <div class="dish-info">
          <h3 class="dish-name">{{ dish.name }}</h3>
          <p class="dish-description">{{ dish.description }}</p>
        </div>
      </div>
    </div>

    <!-- 菜品详情卡片 -->
    <DishDetailCard :dish="selectedDish" v-if="showModal" @close="closeModal"/>
  </div>
</template>

<script>
import DishDetailCard from '../../components/DishDetailCard.vue'; // 确保此路径与实际文件位置匹配
import { getTodayDishes } from '@/api/dishes';
import { baseURL } from '@/utils/request'; // 导入baseURL

export default {
  name: 'TodayDishes',
  components: {
    DishDetailCard
  },
  data() {
    return {
      dishes: [],
      loading: false,
      selectedDish: null, // 用于存储被选中的菜品信息
      showModal: false    // 控制模态弹窗的显示和隐藏
    };
  },
  mounted() {
    this.fetchTodayDishes();
    this.displayCurrentDate();
    document.addEventListener('keydown', this.onEscKey);

  },

  beforeDestroy() {
    document.removeEventListener('keydown', this.onEscKey);
  },

  methods: {
    async fetchTodayDishes() {
      this.loading = true;
      try {
        const response = await getTodayDishes();
        // 使用 reverse 方法对菜品数组进行倒序处理
        this.dishes = response.data.reverse();
      } catch (error) {
        console.error('Error fetching today\'s dishes:', error);
      } finally {
        this.loading = false;
      }
    },

    getImageUrl(path) {
      return `${baseURL}${path}`;
    },
    displayCurrentDate() {
      const currentDate = new Date();
      const formattedDate = currentDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
      document.getElementById('current-date').textContent = `${formattedDate}`;
    },
    selectDish(dish) {
      this.selectedDish = dish;
      this.showModal = true;
      console.log('TestToodayCurrent dish object:', this.selectedDish); // 打印当前的 dish 对象
      console.log('Show modal:', this.showModal);
    },
    closeModal() {
      this.showModal = false;
      this.selectedDish = null;
      console.log('Modal closed. Show modal:', this.showModal);

    },
    onEscKey(event) {
      if (this.showModal && event.keyCode === 27) { // 27 是 Esc 键的键码
        this.closeModal();
      }
    },
  }
};</script>

<style scoped>
.today-dishes h1 {
  text-align: center;
  margin-bottom: 20px;
}

.loading {
  text-align: center;
}

.dishes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.dish-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.dish-card:hover {
  transform: translateY(-5px);
}

.dish-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.dish-info {
  padding: 15px;
}

.dish-name {
  margin-top: 0;
  font-size: 1.2em;
}

.dish-description {
  font-size: 0.9em;
  color: #666;
}

@media (max-width: 600px) {
  .dishes-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .dish-image {
    height: 100px;
  }
}
</style>
